<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
<title>我是司机-注册</title>
<link rel="stylesheet" th:attr="href=@{/layui/2.3.0/css/layui.css?t=1527693307626}" media="all">
<style>
.layui-upload-list {
width:100%;
height:160px;
text-align:center;
margin-bottom:80px;
}
.layui-upload-list img{
display:block;
margin-left:5%;
width:90%;
height:160px;
margin-bottom:20px;
}

.layui-upload{
text-align:center;
}
.layout1_foot{
	position:relative;
	bottom:0px;
	text-align:center;
	color:#fff;
	width: 100%;
    height: 46px;
    background: #242527;
}
</style>
 </head>
<body>
<ul class="layui-nav">
  <li class="layui-nav-item"><a href=""> <img th:attr="src=@{/images/logo.jpeg}" style="width:100px;height:30px;"></a></li>
  
</ul>
<div class="layui-container">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>上传证件</legend>
</fieldset>
<form class="layui-form" action="">
	<div class="layui-row layui-col-md12">
	 	<div class="layui-upload layui-col-md3 layui-col-sm5 layui-col-xs10"  >
	  		<button type="button" class="layui-btn" id="idCardFrontBtn"><i class="layui-icon"></i>上传身份证件正面</button>
	  		<input name="idCardFront" type="hidden" th:value="${idCardFront}">
	  		<div class="layui-upload-list " >
	   			 <img class="layui-upload-img" id="idCardFront" src1="./../image/driverCardFront">
	  		</div>
		</div>  
	  <div class="layui-upload layui-col-md3 layui-col-sm5 layui-col-xs10" >
	  	<button type="button" class="layui-btn" id="idCardBackBtn"><i class="layui-icon"></i>上传身份证件背面</button>
	  	<input name="idCardBack" type="hidden" th:value="${idCardBack}">
	  	<div class="layui-upload-list ">
	    	<img class="layui-upload-img" id="idCardBack" src1="./../image/driverIdCardBack">
	  	</div>
	  </div>
	<div class="layui-upload layui-col-md3 layui-col-sm5 layui-col-xs10">
		  	<button type="button" class="layui-btn" id="driverLicenseBtn">
		  	<i class="layui-icon"></i>上传驾驶证</button>
		  	<input type="hidden" name="driverLicense" th:value="${driverLicense}">
		  	<div class="layui-upload-list">
		    	<img class="layui-upload-img" id="driverLicense" src1="./../image/driverlicense">
		  	</div>
		  </div> 
	
		<div class="layui-upload layui-col-md3 layui-col-sm5 layui-col-xs10">
		  	<button type="button" class="layui-btn" id="drivingLicenseBtn">
		  	<i class="layui-icon"></i>上传行驶证</button>
		  	<input type="hidden" name="drivingLicense" th:value="${drivingLicense}">
		  	<div class="layui-upload-list">
		    	<img class="layui-upload-img" id="drivingLicense" src1="./../image/drivinglicense">
		  	</div>
		</div>
	</div>
	<div class="layui-row" style="text-align:center;margin-top:70px;">
		  <div class="layui-col-md2 layui-col-md-offset5  layui-col-sm4 layui-col-sm-offset4 layui-col-xs10 layui-col-xs1" style="text-align:center;">
		   <button style="background:#009688" id="nextBtn" type="button"  class="layui-btn layui-btn-lg layui-btn-warm layui-btn-fluid">下一步</button>
		   </div>
	 </div>
 </form>
</div>
<div class="layout1_foot" style="postion:relative;line-height:45px;top:130px;">
<p>四川锦云运输有限公司<label style="margin-left:10px;">粤ICP备14091972号</label></p>
</div>

<script src="./../../layui/2.3.0/layui.all.js" charset="utf-8"></script>
<script>
function getUrlParam(name) {
    //构造一个含有目标参数的正则表达式对象
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
    //匹配目标参数
    var r = window.location.search.substr(1).match(reg);
    //返回参数值
    if (r != null) return unescape(r[2]);
    //不存在时返回null
    return null; 
}
layui.use('upload', function(){
	 var $ = layui.jquery,layer = layui.layer,
	 upload = layui.upload,nextBtn=$("#nextBtn");
	 var msg=getUrlParam("errorMsg")
	    if(msg){
	    	layer.msg(msg);
	    }
 if($("input[name=idCardFront]").val()){
	 var img=$("#idCardFront");
	 img.attr("src",img.attr("src1"))
 }
 if($("input[name=idCardBack]").val()){
	 var img=$("#idCardBack");
	 img.attr("src",img.attr("src1"))
 }
 if($("input[name=driverLicense]").val()){
	 var img=$("#driverLicense");
	 img.attr("src",img.attr("src1"))
 }
 if($("input[name=drivingLicense]").val()){
	 var img=$("#drivingLicense");
	 img.attr("src",img.attr("src1"))
 }
  nextBtn.click(function(){
	  
	  if(!$("input[name=idCardFront]").val()){
			 return layer.msg("身份证正面照没有上传");
		}
	  if(!$("input[name=idCardBack]").val()){
			 return layer.msg("身份证背面照没有上传或无效");
		}
	  if(!$("input[name=driverLicense]").val()){
			 return layer.msg("驾驶证照没有上传");
		}
	  if(!$("input[name=drivingLicense]").val()){
		  return layer.msg("行驶证照没有上传");
	  }
	  window.location.href="./../driver/page3.html"
  });
  
  
  var idCardFront = upload.render({
	    elem: '#idCardFrontBtn'
	    ,url: '../upload/driverIdCardFront'
	    ,before: function(obj){
	      obj.preview(function(index, file, result){
	        $('#idCardFront').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //如果上传失败
	      if(!res.success){
	    	  return layer.msg(res["msg"]);
	      }else{
	    	  $("input[name=idCardFront]").val(res["data"]["idNo"]);
	    	  layer.msg('上传成功');
	    	  $('#idCardFront').attr('src', $('#idCardFront').attr("src1"));
	      }
	    }
	    ,error: function(){
	    	return layer.msg('上传失败');
	    }
	  });
  
  var idCardBack = upload.render({
	    elem: '#idCardBackBtn'
	    ,url: '../upload/driverIdCardBack'
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#idCardBack').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //如果上传失败
	      if(!res.success){
	    	  return layer.msg(res["msg"]);
	      }else{
	    	  $("input[name=idCardBack]").val("ok");
	    	  layer.msg('上传成功');
	    	  $('#idCardBack').attr('src', $('#idCardBack').attr("src1"));
	      }
	    }
	    ,error: function(){
	    	return layer.msg('上传失败');
	    }
	  });
  var driverlicense = upload.render({
	    elem: '#driverLicenseBtn'
	    ,url: '../upload/driverlicense'
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#driverLicense').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //如果上传失败
	      if(!res.success){
	    	  return layer.msg(res["msg"]);
	      }else{
	    	  layer.msg('上传成功');
	    	  $("input[name=driverLicense]").val(true);
	    	  $('#driverLicense').attr('src', $('#driverLicense').attr("src1"));
	      }
	      
	    }
	    ,error: function(){
	    	 return layer.msg('上传失败');
	    }
	  });
  var drivinglicense = upload.render({
    elem: '#drivingLicenseBtn'
    ,url: '../upload/drivinglicense'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#drivingLicense').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(!res.success){
    	  return layer.msg(res["msg"]);
      }else{
    	  layer.msg('上传成功');
    	  $("input[name=drivinglicense]").val(true);
    	  $('#drivingLicense').attr('src', $('#drivingLicense').attr("src1"));
      }
      
    }
    ,error: function(){
    	 return layer.msg('上传失败');
    }
  });
});

</script>
</body>
</html>